<template>
  <div>
    <el-card shadow="never"
             v-for="(item, index) in cardData"
             :key="index">
      <div slot="header">供应商{{ item.suppType }}：</div>
      <el-form :ref="'form' + index"
               :model="item"
               :rules="rules"
               label-width="144px"
               class="ccui-form">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="供应商纳税人类型："
                          :prop="item.suppType === 1 ? 'taxPayerType' : ''">
              <el-select class="ccui-form-longInput"
                         v-model="item.taxPayerType"
                         @change="handleChange(item.taxPayerType, index)"
                         placeholder="请选择供应商纳税人类型">
                <el-option v-for="item in jsList.supplierTaxpayerType"
                           :key="item.dicKey"
                           :label="item.dicValue"
                           :value="item.dicKey">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户名称："
                          prop="bankPersonName">
              <input class="el-input__inner"
                     v-model="item.bankPersonName"
                     placeholder="请输入账户名称"
                     maxlength="254" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="开户行名称："
                          :prop="item.suppType === 1 ? 'bankName' : ''">
              <input class="el-input__inner"
                     v-model="item.bankName"
                     placeholder="请输入开户行名称"
                     maxlength="254" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行账号："
                          :prop="item.suppType === 1 ? 'bankId' : ''">
              <input class="el-input__inner"
                     v-model="item.bankId"
                     placeholder="请输入开户行账号"
                     maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
import jsList from './js'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'financeInfo',
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    // 是否是变更页面引用
    isChange: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cardData: [
        {
          taxpayerName: '一般纳税人', // 供应商纳税人类型
          taxPayerType: '0', // 供应商纳税人类型 code
          bankPersonName: '', // 账户名称
          bankName: '', // 开户行名称
          bankId: '', // 开户行账号
          suppType: 1,
        },
        {
          taxpayerName: '一般纳税人', // 供应商纳税人类型
          taxPayerType: '0', // 供应商纳税人类型 code
          bankPersonName: '', // 账户名称
          bankName: '', // 开户行名称
          bankId: '', // 开户行账号
          suppType: 2,
        },
      ],
      rules: {
        taxPayerType: [
          {
            required: true,
            message: '请选择供应商纳税人类型',
            trigger: 'change',
          },
        ],
        bankName: [
          { required: true, message: '请输入开户行名称', trigger: 'blur' },
        ],
        bankId: [
          { required: true, message: '请输入开户行账号', trigger: 'blur' },
        ],
      },
      timer: null,
    }
  },
  computed: {
    ...mapGetters([
      'getSupplierObj',
      'getSupplierBObj',
      'getRemoveSupplier',
      'getRemoveSupplierB',
    ]),
    jsList: () => jsList,
  },
  watch: {
    // 供应商1
    getSupplierObj(newVal) {
      this.watchSendSupplier(newVal, 0)
    },
    getRemoveSupplier(newVal) {
      if (newVal) this.watchResetSupplier('setRemoveSupplier', 0)
    },
    // 供应商2
    getSupplierBObj(newVal) {
      this.watchSendSupplier(newVal, 1)
    },
    getRemoveSupplierB(newVal) {
      if (newVal) this.watchResetSupplier('setRemoveSupplierB', 1)
    },
  },
  mounted() {
    this.init()

    this.$once('hook:beforeDestroy', () => {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    })
  },
  methods: {
    init() {
      if ((!this.isChange && this.detail.state === 'edit') || this.isChange) {
        this.timer = setTimeout(() => {
          this.cardData = cloneDeep(this.detail.pcFinance)
          if (this.cardData.length < 2) {
            this.cardData.push({ suppType: 2 })
          }
        }, 500)
      }
    },

    handleChange(val, index) {
      this.cardData[index].taxpayerName = this.jsList.supplierTaxpayerType.find(
        (_) => _.dicKey === val
      ).dicValue
    },

    // 提交验证
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs[`form0`][0].validate((valid) => {
          if (valid) resolve(this.cardData)
          reject('second')
        })
      })
    },

    watchSendSupplier(newVal, num) {
      this.cardData[num].taxpayerName = newVal.taxpayerName ?? '一般纳税人'
      this.cardData[num].taxPayerType = newVal.taxpayerId
        ? newVal.taxpayerId.toString()
        : '0'
      this.cardData[num].bankPersonName = newVal.bankPersonName ?? ''
      this.cardData[num].bankName = newVal.bankName ?? ''
      this.cardData[num].bankId = newVal.bankId ?? ''
    },

    watchResetSupplier(str, num) {
      this.cardData[num].bankPersonName = ''
      this.cardData[num].bankName = ''
      this.cardData[num].bankId = ''
      this[str](false)
    },

    ...mapActions(['setRemoveSupplier', 'setRemoveSupplierB']),
  },
}
</script>

<style lang="scss" scoped>
.input {
  width: 260px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 4px;
}
.el-input,
.el-input__inner {
  width: 260px;
}
/deep/ .el-card,
/deep/ .el-card__header {
  border: 0;
}
</style>
